<template>
  <div class="all-screen">
    <div class="all-screen security-Center">
      <news-page-header>安全中心</news-page-header>

      <div class="contents">
        <div class="contents-title">帐号绑定</div>
        <div class="content-box" @click="toEditPhone">
          <div class="flex-center">
            <div class="content-icon phone-icon"></div>
            <div class="right flex-space-between none-border">
              <div class="content">
                <span class="content-title">登录手机</span>
                <span class="content-body" v-text="sohuPhone"></span>
              </div>
              <span class="content-enter"></span>
            </div>
          </div>
          <span class="content-explain" style="display: none;">该手机号码用于登录您的帐号</span>
        </div>
      </div>
      <div class="contents">
        <div class="contents-title">安全中心</div>
        <div
          class="content-box flex-center content-box-min"
          style="border-bottom: 2px solid rgba(0,0,0,.07);"
          @click="toSetPassword"
        >
          <div class="content-icon password-icon"></div>
          <div class="right flex-space-between border-bottom">
            <div class="content">
              <span class="content-title">登录密码</span>
            </div>
            <span class="content-enter"></span>
          </div>
        </div>
        <div
          class="content-box no-padding-bottom"
          style="border-bottom: 2px solid rgba(0,0,0,.07);"
          @click="toEditPhone"
        >
          <div class="flex-center">
            <div class="content-icon phone-icon"></div>
            <div class="right flex-space-between border-bottom padding-bottom">
              <div class="content">
                <span class="content-title">安全校验手机</span>
                <span class="content-body" v-text="sohuPhone"></span>
              </div>
              <span class="content-enter"></span>
            </div>
          </div>
          <span class="content-explain border-bottom padding-bottom" style="display: none;">
            该手机不用于登录，仅用于找回密码、
            <br />绑定安全校验邮箱使用
          </span>
        </div>
        <div class="content-box flex-center content-box-min" @click="toAccountMerger">
          <div class="content-icon account-icon"></div>
          <div class="right flex-space-between">
            <div class="content">
              <span class="content-title">帐号统一管理</span>
            </div>
            <span class="content-enter"></span>
          </div>
        </div>
      </div>
      <!---->
      <div class="contents">
        <div class="contents-title">返回</div>
        <div class="content-box" @click="toUserCenter">
          <div class="flex-center">
            <div class="content-icon account-icon"></div>
            <div class="right flex-space-between none-border">
              <div class="content">
                <span class="content-title">返回个人中心</span>
              </div>
              <span class="content-enter"></span>
            </div>
          </div>
          <span class="content-explain" style="display: none;">该手机号码用于登录您的帐号</span>
        </div>
      </div>
    </div>
    <!---->
  </div>
</template>

<script>
import "../../assets/css/registerCss/saveCenter.css";
import newsPageHeader from "../news/newsPageHeader";

export default {
  data() {
    return {
      sohuPhone: ""
    };
  },
  components: {
    newsPageHeader
  },
  methods: {
    toEditPhone() {
      this.$router.push({ name: "editPhone" });
    },
    toUserCenter() {
      this.$router.push({ name: "userCenter" });
    },
    toSetPassword() {
      this.$router.push({ name: "setPassword" });
    },
    toAccountMerger() {
      this.$router.push({ name: "accountMerger" });
    }
  },
  computed: {},
  watch: {},
  async created() {
    let sohuUsername = localStorage.getItem("sohuUsername");
    if (sohuUsername) {
      let { data } = await this.$axios.get(
        "http://localhost:9394/users/checkphone",
        {
          params: {
            username: sohuUsername
          }
        }
      );
      // window.console.log(data);
      if (data.type) {
        localStorage.setItem("sohuPhone", data.phone);
        setTimeout(()=>{
let sohuPhone = localStorage.getItem("sohuPhone");
    this.sohuPhone = sohuPhone.replace(/^(\d{3})\d{6}(\d+)/, "$1******$2");
        },100)
      }
    }
  },
  mounted() {
    
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
